<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "设置",
        "navigationBarBackgroundColor":'#ffffff',
      }
    }
    </route>

<script lang="ts" setup>
    import { ref, onMounted } from 'vue'
import { getUserInfo } from '@/api/login'
import { IGetUserInfoResponse } from '@/api/types/login'

// 定义用户信息变量
const userInfo = ref<{ account?: string, avatar?: string } | null>(null)
const phoneNumber = ref('') // 存储手机号

// 在页面加载时获取用户信息
onMounted(async () => {
    const mobile=uni.getStorageSync('userMobile')
    if(mobile){
        phoneNumber.value=mobile
        phoneNumber.value=mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
  try {
    const res = await getUserInfo()
    if (res.code === 10000) {
      userInfo.value = res.data
      console.log('用户信息获取成功:', userInfo.value)
    } else {
      uni.showToast({
        title: '获取用户信息失败',
        icon: 'error'
      })
    }
  } catch (error) {
    console.error('获取用户信息出错:', error)
    uni.showToast({
      title: '网络错误',
      icon: 'error'
    })
  }
})
</script>

<template>
  <view>
<view class="setting-container">
 
  <!-- 头像 -->
  <view class="list-item">
    <text class="item-label">头像</text>
    <view class="item-right">
      <image class="avatar" :src="userInfo.avatar"></image>
      <image class="arrow" src="/static/image/chevron_right@1x-1.png"></image>
    </view>
  </view>

  <!-- 用户名 -->
  <view class="list-item">
    <text class="item-label">用户名</text>
    <view class="item-right">
      <text class="user-text">{{ userInfo?.account || '用户907456' }}</text>
      <image class="arrow" src="/static/image/chevron_right@1x-1.png"></image>
    </view>
  </view>

  <!-- 手机号码 -->
  <view class="list-item">
    <text class="item-label">手机号码</text>
    <view class="item-right">
      <text class="phone-text">{{phoneNumber || '135****2244'}}</text>
      <image class="arrow" src="/static/image/chevron_right@1x-1.png"></image>
    </view>
  </view>

  <!-- 修改密码 -->
  <view class="list-item">
    <text class="item-label">修改密码</text>
    <image class="arrow" src="/static/image/chevron_right@1x-1.png"></image>
  </view>

  <!-- 微信绑定 -->
  <view class="list-item">
    <text class="item-label">微信</text>
    <view class="item-right">
      <text class="wechat-text">去绑定</text>
      <image class="arrow" src="/static/image/chevron_right@1x-1.png"></image>
    </view>
  </view>

  <!-- 关于我们 -->
  <view class="list-item">
    <text class="item-label">关于我们</text>
    <image class="arrow" src="/static/image/chevron_right@1x-1.png"></image>
  </view>
</view>
  </view>
</template>

<style lang="scss" scoped>
    .custom-navigation {
  height: 70px;
  padding-top: 20px;
  background: #ffffff;
  text-align: center;
  color: white;
  line-height: 90px;
}
/* 全局容器 */
.setting-container {
  background-color: #ffffff;
  min-height: 100vh;
}
.header {
  /* margin-bottom: 20px; */
  width: 100%;
  border-bottom: 2px solid #ffffff;
  padding-bottom:15px ;
}
.title {
  font-size: 17px;
  margin-left: 135px;
}
/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}
.back-icon {
  width: 32rpx;
  height: 32rpx;
}
.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 32rpx;
}

/* 列表项通用样式 */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 32rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}
.item-label {
  font-size: 28rpx;
  color: #333;
}
.item-right {
  display: flex;
  align-items: center;
}
.arrow {
  width: 24rpx;
  height: 24rpx;
  margin-left: 16rpx;
}

/* 头像特殊处理 */
.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

/* 文字内容统一样式 */
.user-text, .phone-text, .wechat-text {
  font-size: 26rpx;
  color: #999;
}

/* 退出登录 */
.logout-btn {
  margin: 64rpx 32rpx 0;
  padding: 24rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #ff4d4f;
  background-color: #fff;
  border-radius: 16rpx;
}

/* 提示弹框（静态模拟） */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12rpx 24rpx;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 24rpx;
  border-radius: 16rpx;
  z-index: 999;
}
.toast-clear { /* 清除缓存提示 */ }
.toast-version { /* 版本提示 */ }
</style>